<template>
  <nav class="navbar fixed-top bg-primary">
    <router-link
      to="/articles"
      v-bind:class="['nav-link', item == 1 ? 'text-white' : 'text-light']"
      >网站首页</router-link
    >
    <router-link
      to="/Politics"
      :class="['nav-link', item == 2 ? 'text-white' : 'text-light']"
      >医药时政</router-link
    >
    <div
      @click="gobottom"
      :class="['nav-link', item == 3 ? 'text-white' : 'text-light']"
    >
      <div class="information-title">联系我们</div>
    </div>
    <form action="" class="navbar-form">
      <input type="text" class="" placeholder="请输入..." />

      <button class="btn btn-default text-white" type="button">搜索</button>
    </form>

<div v-if="userName" class="userName" style="cursor:pointer">{{userName}}</div>
   <div v-else>
    <router-link 
      to="/login"
      :class="['nav-link', item == 4 ? 'text-white' : 'text-light']"
      >登录/注册</router-link>
   </div>
  </nav>
</template>
<style>
.information-title {
  cursor: pointer;
}
</style>
<script>
export default {
  name: "Head",
  props: {
    item: Number,
  },

  methods: {
    gobottom: function () {
      scrollTo(0, document.documentElement.scrollHeight);
    },
  },
  computed:{
    userName:function(){
      return localStorage.getItem('userName') //获取用户名
    }
  },
};
</script>

